<template>
    <div style="height: 100%">
        <el-tabs v-model="activeName" style="padding-left: 5px">
            <el-tab-pane label="组件设置" name="组件设置"></el-tab-pane>
            <el-tab-pane label="全局问卷设置" name="全局问卷设置"></el-tab-pane>
        </el-tabs>
        <div style="padding: 10px 5px;overflow-y: auto;height: calc(100% - 50px)" v-if="activeName == '组件设置'">
            <el-form label-width="120px" label-position="left" class="comp-formitem"
                     v-if="forKeys.length">
                <el-collapse v-model="activeNamesComp">
                    <el-collapse-item title="基本设置" name="基本设置">
                        <template v-for="itemKey in forKeys">
                            <component v-if="showCompBranch(itemKey)" :key="itemKey" :is="itemKey + '-editor'"
                                       :self0ptions="compOptions" :prentData="prentData"></component>
                        </template>
                    </el-collapse-item>
                    <el-collapse-item title="选项设置" name="选项设置" v-if="selSettingKeys.length">
                        <template v-for="itemKey in selSettingKeys">
                            <component :key="itemKey" :is="itemKey + '-editor'"
                                       :self0ptions="compOptions"></component>
                        </template>
                    </el-collapse-item>
                    <el-collapse-item title="其他设置" name="其他设置" v-if="osForKeys.length">
                        <template v-for="itemKey in osForKeys">
                            <component :key="itemKey" :is="itemKey + '-editor'"
                                       :self0ptions="compOptions"></component>
                        </template>
                    </el-collapse-item>
                    <el-collapse-item title="量表设置" name="量表设置"
                                      v-if="scaleSettingKeys.length && compOptions.type == 'scaleSelect'">
                        <template v-for="itemKey in scaleSettingKeys">
                            <component :key="itemKey" :is="itemKey + '-editor'"
                                       :self0ptions="compOptions"></component>
                        </template>
                    </el-collapse-item>
                    <el-collapse-item title="打分设置" name="打分设置"
                                      v-if="scoreSettingKeys.length && compOptions.type == 'markScore'">
                        <template v-for="itemKey in scoreSettingKeys">
                            <component :key="itemKey" :is="itemKey + '-editor'"
                                       :self0ptions="compOptions"></component>
                        </template>
                    </el-collapse-item>
                </el-collapse>
            </el-form>
            <el-form v-if="parentCompKeys" label-width="120px" label-position="left" class="comp-formitem">
                <template v-for="itemKey in parentCompKeys">
                    <component :key="itemKey" :is="itemKey + 'Editor'"
                               :parentContent="parentContent"></component>
                </template>
            </el-form>
        </div>
        <div style="padding: 10px 5px" v-else-if="activeName == '全局问卷设置'">
            <el-form label-width="120px" label-position="left" class="comp-formitem"
                     v-if="rightFormCompKey.length">
                <template v-for="itemKey in rightFormCompKey">
                    <component v-if="itemKey" :key="itemKey" :is="itemKey + 'Editor'"
                               :self0ptions="formGlobalConf1"></component>
                </template>
            </el-form>
        </div>
    </div>
</template>
<script>
import {containerConfigList, formGlobalConf} from "@/components/form-designer/container-panel/containerConfig";
import {fileterPadil} from '@/components/form-designer/widget-panel/widgetsConfig'
export default {
    name: "index",
    props: {
        selfId: {
            type: String,
        },
        prentId: {
            type: String,
        }
    },
    inject:['lastWenJson'],
    data() {
        return {
            activeName: '组件属性',
            formGlobalConf1:formGlobalConf,
            activeNamesComp: ['基本设置', '选项设置', '其他设置', '量表设置', '打分设置'],
            compOptions: {},
            prentData: {},
            selfData: {},
            forKeys: [],
            osForKeys: [],
            selSettingKeys: [],
            scaleSettingKeys: [],
            scoreSettingKeys: [],
            rightFormCompKey: [],
            parentContent:{},
            parentCompKeys:[],
            showLastWenjuan:false,
        }
    },
    watch: {
        'compOptions.options.hasMutlip': {
            handler(val) {
                if (val) {
                    this.selSettingKeys = this.forKeys.filter(item => item == 'minSelect' || item == 'maxSelect' || item == 'hasMutlip')
                } else {
                    this.selSettingKeys = this.forKeys.filter(item => item == 'hasMutlip')
                }
            },
            deep: true
        },
        'formGlobalConf1':{
            handler(val){
                this.rightFormCompKey = Object.keys(formGlobalConf)
                this.filterRightComp(val)
            },
            deep:true,
            immediate:true,
        }
    },
    created() {
        this.activeName = '组件设置'
        this.rightFormCompKey = Object.keys(formGlobalConf)
        this.filterRightComp(this.formGlobalConf1)

        const ind = containerConfigList.findIndex(item => item.id == this.prentId)
        if(ind != -1) this.prentData = containerConfigList[ind]

        if(this.lastWenJson){
           this.showLastWenjuan = true
        }
        else {
            this.showLastWenjuan = ''
        }
    },
    mounted() {
        setTimeout(()=>{
            this.formGlobalConf1 = formGlobalConf
        },1000)
    },
    methods: {
        //过滤全局菜单选项
        filterRightComp(val){
            if(!val.isTotalSource){
                this.rightFormCompKey = this.rightFormCompKey.filter(item => item != 'totalSource' && item != 'questDesignId')
                return
            }
            if(!val.isTimeRestriction){
                this.rightFormCompKey = this.rightFormCompKey.filter(item => item != 'actionStartTime' && item != 'actionEndTime' && item != 'questDesignId')
                return;
            }
            this.rightFormCompKey = this.rightFormCompKey.filter(item => item != 'questDesignId')
        },
        //获取父元素里面每个题型的菜单
        getCompOptions(selfId, prentId) {
            this.parentCompKeys = []
            const prentInd = containerConfigList.findIndex(item => item.id == prentId)
            if (prentInd != -1) {
                const index = containerConfigList[prentInd].widgetList.findIndex(item => item.id == selfId)
                if (index != -1) {
                    this.compOptions = containerConfigList[prentInd].widgetList[index]
                    this.forKeys = Object.keys(containerConfigList[prentInd].widgetList[index].options)
                    this.osForKeys = this.forKeys.filter(item => item == 'hasUpload' || item == 'isRemark' || item == 'onChangeValue')
                    this.selSettingKeys = this.forKeys.filter(item => item == 'minSelect' || item == 'maxSelect' || item == 'hasMutlip')
                    this.scaleSettingKeys = this.forKeys.filter(item => item == 'extremeTag' || item == 'liangSetting' || item == 'startNum' || item == 'showStyle')
                    this.scoreSettingKeys = this.forKeys.filter(item => item == 'liangSetting' || item == 'showStyle')
                }
            } else {
                this.$message.error('未知错误，找不到此唯一值')
            }
        },
        //获取题组容器数据
        getParentCont(row){
            this.forKeys = []
            this.parentContent = row
            this.parentCompKeys = Object.keys(row).filter(item => item == 'sortTitle' || item == 'isPrentAndChildSort' || item == 'isChildSort'
                || item == 'title' || item == 'parentWeight' || item == 'itemTotalSource')
        },
        //基本设置
        showCompBranch(itemKey) {
            const ind = fileterPadil.findIndex(key => key == itemKey)
            if (ind == -1) {
                if(itemKey == 'lastWenjuanItemName'){
                    return this.showLastWenjuan
                }
                if (itemKey == 'contentMaxLength') {
                    return this.compOptions.options.questionStem ? true : false
                }
                if (itemKey == 'sourceSelect') {
                    return this.compOptions.options.sourceBol ? true : false
                }
                if (itemKey == 'sourceTotal') {
                    if (this.compOptions.options.sourceBol) {
                        if (this.compOptions.options.sourceSelect == '不计分') return false
                        return true
                    } else {
                        return false
                    }
                }
                if (itemKey == 'sourceMin') {
                    if (this.compOptions.options.sourceBol) {
                        if (this.compOptions.options.sourceSelect == '每个选项可自定义分值'
                            || this.compOptions.options.sourceSelect == '扣分题(默认得总分)') return true
                        return false
                    } else {
                        return false
                    }
                }
                if (itemKey == 'sourceSuperTotal') {
                    if (this.compOptions.options.sourceBol) {
                        if (this.compOptions.options.sourceSelect == '每个选项可自定义分值'
                            || this.compOptions.options.sourceSelect == '扣分题(默认得总分)') return true
                        return false
                    } else {
                        return false
                    }
                }
                if (itemKey == 'sourceLowTotal') {
                    if (this.compOptions.options.sourceBol) {
                        if (this.compOptions.options.sourceSelect == '每个选项可自定义分值'
                            || this.compOptions.options.sourceSelect == '扣分题(默认得总分)') return true
                        return false
                    } else {
                        return false
                    }
                }
                return true
            } else {
                return false
            }
        },
    }
}
</script>
<style scoped lang="scss">
::v-deep .comp-formitem .el-form-item {
  margin-bottom: 5px !important;
}
</style>
